<template>
  <div ref="appRef" id="index">

  
  <div class="water-level" >
    <!-- <div class="z4"></div> -->
    <module-head title=""></module-head>
    <div class="main">
      <div class="sides left">
        <div class="z4"></div>
     
        <!-- 今日窗口期 -->
        <today-window></today-window>
        <today-window2></today-window2>
        <today-window3></today-window3>

      </div>
      <div class="mid">
        <!-- 热力地图 -->
        <heat-map :handleDataTime="handleDataTime"></heat-map>
      </div>
      <div class="sides right">
        <div class="z44"></div>
        <today-window4></today-window4>
        <today-window5></today-window5>
        <today-window6></today-window6>
        <!-- 未来7日窗口期及主航道水位 -->
        <!-- <next-week></next-week> -->
        <!-- 三维地形图 -->
        <!-- <map3d></map3d> -->
      </div>
    </div>
  </div>
</div>
</template>
<script>
import moduleHead from "./components/moduleHead.vue";
import todayWindow from "./components/todayWindow.vue";
import todayWindow2 from "./components/todayWindow2.vue";
import todayWindow3 from "./components/todayWindow3.vue";
import todayWindow4 from "./components/todayWindow4.vue";
import todayWindow5 from "./components/todayWindow5.vue";
import todayWindow6 from "./components/todayWindow6.vue";
import currentLevel from "./components/currentLevel/index.vue";
import nextWeek from "./components/nextWeek/index.vue";
import map3d from "./components/map3d.vue";
import heatMap from "./components/heatMap.vue";
import drawMixin from "../../utils/drawMixin";
export default {
  mixins: [ drawMixin ],
  components: {
    moduleHead,
    todayWindow,
    currentLevel,
    nextWeek,
    map3d,
    heatMap,
    todayWindow2,
    todayWindow3,
    todayWindow4,
    todayWindow5,
    todayWindow6,

  },
  data() {
    return {
      title: "",
      date: null,
    };
  },
  methods: {
    handleDataTime(v) {
      this.date = v;
    },
  },
};
</script>
<style scoped lang='scss'>
#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;}
.car{
  width: 200px;
  height: 200px;
  background-color: aqua;
 position: fixed;
 top: 200px;
 left:200px;
}
.z4{
  position: absolute;
z-index: 5;
  width: 636px;
  top: 0;
  height: 1080px;
  background: linear-gradient(90deg, rgba(4, 27, 44, 0.9) 67%, rgba(4, 27, 44, 0) 100%);
  animation: slide-l 1.5s;
}
.z44{
  position: absolute;
z-index: 5;
  width: 636px;
  top: 0;
  height: 1080px;
  transform: rotate(180deg);
opacity: 1;
right: 0;
background: linear-gradient(90deg, rgba(4, 27, 44, 0.9) 67%, rgba(4, 27, 44, 0) 100%);
  animation: slide-r 1.5s;
}
.water-level {
  height: 100%;
  overflow: hidden;
  
  // background-size: 100% 100%;
  position: relative;
  z-index: 5;
  .main {
    height: 1080px;
    // padding: vh(22px) vw(30px);
    display: flex;
    justify-content: space-between;
    .sides {
      width: 420px;
    }
    .mid {
      width: 935px;
      animation: fade 6s;
    }
    .left {
    height: 1080px;
      ::v-deep {
        .today-window {
          animation: slide-l 0.8s;
        }
        .current-level {
          animation: slide-l 1.5s;
        }
      }
    }
    .right {
      ::v-deep {
        .next-week {
          animation: slide-r 0.8s;
        }
        .map3d {
          animation: slide-r 1.5s;
        }
      }
    }
    // 左侧入场动画
    @keyframes slide-l {
      0% {
        transform: translateX(-100%);
      }
      80% {
        transform: translateX(20px);
      }
      100% {
        transform: translateX(0);
      }
    }

    // 右侧入场动画
    @keyframes slide-r {
      0% {
        transform: translateX(100%);
      }
      80% {
        transform: translateX(-20px);
      }
      100% {
        transform: translateX(0);
      }
    }

    // 中间淡入动画
    @keyframes fade {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  }
}
</style>
